<template>
  <el-dialog
    :title="name"
    :visible="dialogVisible"
    width="500px"
    @close="closemet"
    @open="openDialog"
  >
    <template>
      <el-form ref="form" :model="sizeForm" label-width="80px" :rules="rules">
        <el-form-item label="所属学科" prop="subjectID" v-if="!$route.query.id">
          <el-select
            v-model="sizeForm.subjectID"
            placeholder="请选择"
            style="width:350px"
          >
            <el-option
              v-for="item in subjectNameList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" prop="directoryName" class="catalogue">
          <el-input v-model="sizeForm.directoryName" style="width:350px" />
        </el-form-item>
      </el-form>
    </template>
    <span class="dialog-footer">
      <el-button @click="closeRoleDialog">取 消</el-button>
      <el-button type="success" @click="confirmAdd">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { list, add, update } from '@/api/hmmm/directorys'

import { simple } from '@/api/hmmm/subjects.js'
export default {
  name: 'DirectorysAdd',
  props: {
    dialogVisible: {
      type: Boolean
    },
    subjectID: {
      required: true
    },
    name: {
      type: String
    },
    getDirId: {
      type: String
    },
    subjectidD: {
      type: String
    },
    subjectNamee: {
      type: String
    }
  },
  created () {
    this.getsubjectName()
    // this.sizeForm.subjectID = parseInt(this.subjectidD)
    // this.sizeForm.directoryName = this.subjectNamee
  },
  // 监听props的改变
  watch: {
    getDirId (newValue) {
      this.sizeForm.id = Number(newValue)
      console.log(newValue, '改变')
    },
    subjectidD (newValue) {
      console.log('subjectidD被改变了')
      // this.oldSubjectId = newValue
      this.sizeForm.subjectID = parseInt(newValue)
    },
    subjectNamee (newValue) {
      console.log('directoryName被改变了')
      this.sizeForm.directoryName = newValue
    }
  },
  data () {
    return {
      // dialogVisible: false,
      sizeForm: {
        subjectID: '',
        directoryName: ''
      },
      subjectNameList: [],
      oldSubjectId: '',

      // subjectName: "",
      rules: {
        subjectID: [
          { required: true, message: '所属学科不能为空', trigger: 'blur' }
        ],
        directoryName: [
          { required: true, message: '目录名称不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  mounted () {
    console.log(this.subjectID)
    // this.sizeForm.subjectID = parseInt(this.subjectidD)
    // this.sizeForm.directoryName = this.subjectNamee
  },

  methods: {
    // 获取学科信息
    async getsubjectName () {
      // 如果路由没有传递id的话就会请求学科信息
      console.log(this.subjectID)
      if (this.subjectID === undefined) {
        //  请求数据
        const data = await list() // 获取学科数据
        if (data.status !== 200) {
          return this.$message({ type: 'error', message: '获取学科信息失败' })
        }
        // console.log(data);
        this.$message({ type: 'success', message: '获取学科信息成功' })
        this.subjectNameList = data.data.items // 将数据保存到data中
        console.log(this.subjectNameList, '6666666666666666666666')
      }
    },

    closemet () {
      this.$emit('dal')
    },
    // 取消弹窗(关闭)
    closeRoleDialog () {
      // this.sizeForm = {
      //   subjectID: '',
      //   directoryName: ''
      // }

      this.closemet()
      this.$emit('aaaa', false)
      this.$emit('aaaa1', false)
      // this.dialogVisible = false
    },
    // 点击确认
    confirmAdd () {
      this.$refs.form.validate(async valid => {
        if (valid) {
          console.log(this.sizeForm, '2222222222222222222222')
          if (this.sizeForm.id) {
            console.log(this.subjectidD)
            // if (this.sizeForm.subjectID === '') this.sizeForm.subjectID = this.subjectidD
            await update(this.sizeForm)
            this.$message.success('编辑成功')
            // this.sizeForm = {
            //   subjectID: '',
            //   directoryName: ''
            // }
          } else {
            if (this.subjectID) {
              this.sizeForm.subjectID = this.subjectID
              await add(this.sizeForm)
              this.sizeForm = {
                subjectID: '',
                directoryName: ''
              }
            } else {
              await add(this.sizeForm)
              this.$message.success('添加成功')
              this.sizeForm = {
                subjectID: '',
                directoryName: ''
              }
            }
          }
          this.closemet()
          this.$emit('update-list')
        }
        console.log(this.sizeForm)
      })
    },
    async openDialog () {
      const res = await simple()
      console.log(res, '++++++++++++++++++++++++')
      this.subjectNameList = res.data
    }
  }
}
</script>
<style scoped lang="less" socped>
::v-deep {
  .catalogue {
    margin-top: 20px;
  }
  .dialog-footer {
    // display: inline-block;
    margin-top: 20px;
    display: flex;
    justify-content: center;
  }
}
</style>
